{include file="common/header"}
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <table id="power-table" lay-filter="power-table"></table>
    </div>
</div>

<script type="text/html" id="power-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="pear-btn pear-btn-success pear-btn-md" lay-event="expandAll">
        <i class="layui-icon layui-icon-spread-left"></i>
        展开
    </button>
    <button class="pear-btn pear-btn-success pear-btn-md" lay-event="foldAll">
        <i class="layui-icon layui-icon-shrink-right"></i>
        折叠
    </button>
</script>

<script type="text/html" id="power-bar">
    <button class="pear-btn pear-btn-primary pear-btn-xs" lay-event="edit">
        <i class="layui-icon">编辑</i>
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-xs" lay-event="remove">
        <i class="layui-icon">删除</i>
    </button>
</script>

<script type="text/html" id="power-type">
    {{#if (d.type == '0') { }}
    <span>目录</span>
    {{# }else if(d.type == '1'){ }}
    <span>菜单</span>
    {{# } }}
</script>
<script type="text/html" id="status">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="status" {{#
           if(d.status==1){ }} checked {{# } }}>
</script>
{include file="common/footer"}
<script>
    layui.use(['table', 'form', 'treetable', 'jquery', 'common'], function () {
        let table = layui.table;
        let form = layui.form;
        let treetable = layui.treetable;
        let $ = layui.jquery;
        let common = layui.common;

        let MODULE_PATH = "{$Request.root}/permission/";

        window.render = function () {
            treetable.render({
                treeColIndex: 0,
                treeSpid: 0,
                treeIdName: 'id',
                treePidName: 'pid',
                skin: 'grid',
                even: 'true',
                size: 'lg',
                method: 'post',
                treeDefaultClose: true,
                toolbar: '#power-toolbar',
                elem: '#power-table',
                url: MODULE_PATH + 'index',
                page: false,
                cols: [
                    [
                        {field: 'title', minWidth: 200, unresize: true, title: '权限名称'},
                        {
                            field: 'icon', title: '图标', unresize: true, align: 'center',
                            templet: function (d) {
                                return '<i class="' + d.icon + '"></i>';
                            }
                        },
                        {field: 'type', title: '权限类型', unresize: true, templet: '#power-type'},
                        {title: '状态', field: 'status', align: 'center', unresize: true, templet: '#status'},
                        {field: 'sort', title: '排序', align: 'center', unresize: true},
                        {title: '操作', templet: '#power-bar', unresize: true, width: 130, align: 'center'}
                    ]
                ]
            });
        }
        render();
        table.on('tool(power-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        })

        table.on('toolbar(power-table)', function (obj) {
            if (obj.event === 'add') {
                layer.open({
                    type: 2,
                    title: '新增菜单',
                    offset: 'r',
                    anim: 'slideLeft', // 从右往左
                    shade: 0.1,
                    shadeClose: true,
                    area: common.screenSide(),
                    content: MODULE_PATH + 'add'
                });
            } else if (obj.event === 'expandAll') {
                treetable.expandAll("#power-table");
            } else if (obj.event === 'foldAll') {
                treetable.foldAll("#power-table");
            }
        });
        window.edit = function (obj) {
            layer.open({
                type: 2,
                title: '修改菜单',
                offset: 'r',
                anim: 'slideLeft', // 从右往左
                shade: 0.1,
                shadeClose: true,
                area: common.screenSide(),
                content: MODULE_PATH + 'edit/id/' + obj.data['id']
            });
        }
        window.remove = function (obj) {
            layer.confirm('确定要删除该菜单', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH + 'remove',
                    data: {id: obj.data['id']},
                    dataType: 'json',
                    type: 'POST',
                    success: function (res) {
                        layer.close(loading);
                        //判断有没有权限
                        if (res && res.code == 999) {
                            layer.msg(res.msg, {
                                icon: 5,
                                time: 2000,
                            })
                            return false;
                        } else if (res.code == 200) {
                            layer.msg(res.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                top.location.reload();
                            });
                        } else {
                            layer.confirm(res.msg, {
                                icon: 3,
                                title: '提示'
                            }, function (index) {
                                layer.close(index);
                                let loading = layer.load();
                                $.ajax({
                                    url: MODULE_PATH + 'remove',
                                    data: {id: obj.data['id'], type: true},
                                    dataType: 'json',
                                    type: 'POST',
                                    success: function (res) {
                                        layer.close(loading);
                                        //判断有没有权限
                                        if (res && res.code == 999) {
                                            layer.msg(res.msg, {
                                                icon: 5,
                                                time: 2000,
                                            })
                                            return false;
                                        } else if (res.code == 200) {
                                            layer.msg(res.msg, {
                                                icon: 1,
                                                time: 1000
                                            }, function () {
                                                top.location.reload();
                                            });
                                        }
                                    }
                                })
                            });
                        }
                    }
                })
            });
        }
        form.on('switch(status)', function (data) {
            var status = data.elem.checked ? 1 : 2;
            var id = this.value;
            var load = layer.load();
            $.post(MODULE_PATH + 'status', {status: status, id: id}, function (res) {
                layer.close(load);
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1, time: 1500})
                } else {
                    layer.msg(res.msg, {icon: 2, time: 1500}, function () {
                        $(data.elem).prop('checked', !$(data.elem).prop('checked'));
                        form.render()
                    })
                }
            })
        });
    })
</script>
</body>
</html>
